﻿

@{
    ViewBag.Title = "Index1";
    Layout = "~/Areas/HouTaiArea/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <style>

        button {
            background-color: #CCE8EB; /* Green */
            border: none;
            color: #666;
            /*padding: 15px 32px;*/
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border: 1px solid #cad9ea;
        }

        #table {
            margin-left: 22%;
            font-size: 14px;
            width: 79%;
            border-collapse: collapse;
            text-align: center;
        }

            #table td, table th {
                border: 1px solid #cad9ea;
                color: #666;
                height: 30px;
            }

        table thead th {
            background-color: #CCE8EB;
            width: 100px;
        }

        table tr:nth-child(odd) {
            background: #fff;
        }

        table tr:nth-child(even) {
            background: #F5FAFA;
        }
    </style>

</head>
<body>
    <div>
        <div>
            <h5>条件查询</h5>
            <div class="form-inline card-body">
                <div class="form-group">
                    @*<label for="name">编号</label>
                        &nbsp; &nbsp;<input type="text" class="form-control" id="Uid" placeholder="编号">*@
                    <label for="name">姓名</label>
                    &nbsp;
                    <input type="text" id="Uname" placeholder="姓名">
                </div>
                <div class="form-group">
                    <button id="sel" class="btn btn-primary">查询</button>
                </div>
            </div>
        </div>
        <table id="table" class="table table-bordered table-hover
               text-center">
            <thead class="thead-dark">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>昵称</th>
                    <th>电话号码</th>
                    <th>头像</th>
                    <th>是否为管理员</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
        <div id="example" aria-label="Page navigation">
            <ul id="pageLimit" class="pagination"></ul>
        </div>
    </div>
    <script src="~/Scripts/jquery-3.6.0.js"></script>
    <script src="~/Scripts/bootstrap-paginator.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script>
        $(function () {
            $.ajax({
                url: "@Url.Action("SelectPage")",
                datatype: 'json',
                type: "get",
                data: { pageindex: 1, pagesize:5},
                success: function (data) {
                    dataShow(data);
                    $('#example').bootstrapPaginator(Getoptions(JSON.parse(data)));
                },
                error: function () { }
            });

            $("#sel").click(function () {
                $.post("@Url.Action("SelectPage")",
                    {
                        pageindex: 1,
                        pagesize: 5,
                        "Uname": $("#Uname").val(),
                    }, function (data) {
                    dataShow(data);
                    $('#example').bootstrapPaginator(Getoptions(JSON.parse(data)));
                });
            });
        })
        //表格显示数据
        function dataShow(r) {
            $(".table tr:gt(0)").remove();
            if (r != null) {
                $.each(eval("(" + r + ")").list, function (index, item) { //遍历返回的json
                    var tr = $("<tr>").appendTo(".table");
                    $("<td>").appendTo(tr).text(item.Uid);
                    $("<td>").appendTo(tr).text(item.Uname);
                    $("<td>").appendTo(tr).text(item.upwd);
                    $("<td>").appendTo(tr).text(item.nname);
                    $("<td>").appendTo(tr).text(item.mobile);
                    //$("<td>").appendTo(tr).text(item.ctime);
                    //$("<td>").appendTo(tr).text(item.ptime);
                    if (item.Admin == true) {
                        $("<td>").appendTo(tr).text("是");
                    } else {
                        $("<td>").appendTo(tr).text("否");
                    }
                    $("<td/>").appendTo(tr).html("<a href=Update/" + item.Uid + " > 修改</a >|<a href=Delete/" + item.Uid + " > 删除</a >");
                    /*$("<td/>").appendTo(tr).html("<a href=Delete/" + item.Uid + " > 删除</a >");*/
                });
            }
        }
        //显示分页插件的数据
        function Getoptions(r) {
            return {
                currentPage: r.currentPage, //当前页数
                totalPages: r.pageSum, //总页数
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },//点击事件，用于通过Ajax来刷新整个list列表
                onPageClicked: function (event, originalEvent, type, page) {
                    $.post("@Url.Action("SelectPage")",
                        {
                            pageindex: page,
                            pagesize: 5,
                            "Uname": $("#Uname").val(),
                            //"sex": $("input[name='sex']:checked").val()
                        }, function (r) {
                        dataShow(r);
                    });
                }
            }
        }
    </script>
</body>
</html>